import { Component, OnInit, Output, Input, EventEmitter, } from '@angular/core';
import { Router } from '@angular/router';
import * as $ from 'jquery';
import {Article} from "../Article";
import {HeroService} from "../hero.service";
declare var editormd: any;


@Component({
  selector: 'app-publish-blog',
  templateUrl: './publish-blog.component.html',
  styleUrls: ['./publish-blog.component.css']
})
export class PublishBlogComponent implements OnInit {
  article:Article = new Article();
  public myEditor: any;
  public obj: any;
  @Input() markdown: string;

  constructor(private heroService: HeroService,private router: Router) {
    console.log('PublishBlogComponent Constructor')
  }
  ngOnInit() {
    const data = this.markdown;
    this.myEditor = editormd('editorMd', {
      markdown: data,
      width: '100%',
      height: 640,
      syncScrolling: 'single',
      path: 'assets/editor.md/lib/',
      imageUpload: true,
      imageFormats: ["jpg", "jpeg", "gif", "png", "bmp"],
      imageUploadURL: 'api/upload/mdupload?test=dfdf',
      emoji: true,
      taskList: true,
      tex: true,  // 默认不解析
      flowChart: true,  // 默认不解析
      sequenceDiagram: true,  // 默认不解析SS
      // saveHTMLToTextarea :true
    });

    $('.editormd-preview-close-btn').hide();
  }

  /**
   * 将子组件获取的内容传输到父组件
   */
  @Output() onChange = new EventEmitter<any>();
  getData() {
    this.onChange.emit(this.myEditor.getMarkdown());
  }
  onClickMe() {
    this.article.articleContent = this.myEditor.getMarkdown();
    console.log(this.article);
    this.heroService.addArticle(this.article).subscribe(c => {
      this.router.navigate(['/articles']);
    });
  }

}
